<!--
 * @Descripttion: 
 * @Author: liujing
 * @Date: 2021-07-15 14:16:16
 * @LastEditTime: 2021-09-24 17:10:45
-->
<template>
  <div>
    <div class="app-side-logo" style="background:#434343;height:75px;">
      <!-- <img
        src="@/assets/logo.png"
        :width="collapse ? '60' : '60'"
        height="60"
      /> -->

      <p class="title">敏感数据共享系统</p>
    </div>

    <el-menu
      class="el-menu-vertical-demo"
      router
      active-text-color="#fff"
      background-color="#b19577"
      @open="handleOpen"
      @close="handleClose"
    >
      <SidebarItem
        v-for="(item, idx) in routes"
        :subroute="item"
        :fatherpath="fatherPath"
        :barIdx="idx"
        :key="idx"
      />
    </el-menu>
  </div>
</template>

<script>
import SidebarItem from "./SidebarItem";
export default {
  name: "Sidebar",
  components: {
    SidebarItem
  },
  props: {
    collapse: {
      type: Boolean
    },
    routes: {
      type: Array
    }
  },

  data() {
    return { title: "" };
  },
  computed: {
    // 首次进入页面时展开当前页面所属的菜单
    defaultActive() {
      return this.$route.path;
    },
    fatherPath() {
      // 这里直接获取路由配置的 '/' 项
      return this.$router.options.routes[1].path;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  width: 150px;
  height: 75px;
  line-height: 75px;
  color: #fff;
  margin: 0;
}
.el-menu-vertical-demo {
  width: 230px;
  height: 100%;
  background-color: #b19577;
}
</style>
